<template>
  <div class="cont-right">
    <div class="centerbox">
      <!-- K线部分 -->
      <kline-Rig></kline-Rig>
      <input-Exch></input-Exch>
    </div>
    <div class="coinrightbox">
      <!-- 大盘记录 成交记录 -->
      <right-His></right-His>
    </div>
  </div>
</template>
<script>
import mainCoinModel from "@/model/allCoinModel.js";
import klineRig from "@/components/TradeCom/klineRig.vue";
import rightHis from "@/components/TradeCom/rightHis.vue";
import inputExch from "@/components/TradeCom/inputExch.vue";
import {
  addCustomList,
  removeCustomList,
  matchCustomList
} from "@/assets/js/common.js";
export default {
  name: "coin-Tab",
  components: { 
    klineRig,
    rightHis,
    inputExch
  },
  // 接收子组件信息
  props:["partInfo"],
  data() {
    return {
      infos:this.partInfo,
      mainCoinModel: mainCoinModel,
      currentId: 0,
      tableData: null,
      showLoading: true,
      activeName: "second",
      
      tableData: [{
            coin: 'BTC',
            price: '9378.12',
            rise: '+1.12',
          }, {
            coin: 'ETH',
            price: '192.52',
            rise: '-1.95',
          }, {
            coin: 'ETH',
            price: '0.3018',
            rise: '+5.97',
          },

      ]  
    };
  },
  destroyed() {},
  watch:{
    partInfo(){
      console.log({PART:this.partInfo})
      this.infos = this.partInfo;
    }
  },
  mounted(){
    this.infos = this.partInfo;
    console.log(this.infos);
    
  },
  methods: {
    formatter(row, column) {
        return row.rise;
    },
    //表格列点击
    getRowData(data) {
      console.log(123456789,data);
      this.topData=data;
      // if (mainCoinModel.tradecoinid == data.coinid) return false;
      mainCoinModel.tradecoinid = data.coinid;
      mainCoinModel.coinid = data.maincoinid;
      this.latestBuyData = [];
      this.latestSoldData = [];
      //当日委托
      this.currentDeclareData = [];
      //历史委托
      this.historicalDeclareData = [];
      //成交历史
      this.historicalBuyData = [];
      // this.loadData(data);
    },
    // 获取自选
    getCustomList() {
      let customList = this.storage.get("customList");
      this.currentId = "opt";
      customList && customList.length > 0 && (this.tableData = customList);
    },
    // 添加自选
    addMylist(rowData, index) {
      let data = rowData;
      this.$set(this.tableData, index, data);
      data.isMyLike = !data.isMyLike;
      if (data.isMyLike) {
        addCustomList(data);
      } else {
        if (this.currentId == "opt") {
          this.tableData = removeCustomList(data);
        } else {
          removeCustomList(data);
        }
      }
    }
  }
};
</script>
<style lang="scss" scoped>
.cont-right{
  display: flex;
}
.centerbox{
    display: flex;
    flex: 1 0 auto;
    margin: 0 6px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    max-width: calc(100% - 342px);
    min-width: 560px;
    position: relative;
  }
@media screen and (min-width: 1720px){
  .centerbox{
    width: calc(100% - 332px);
  }
  .coinrightbox {
    width: 665px;
  }
}
 @media screen and (max-width: 1600px) { /*当屏幕尺寸小于600px时，应用下面的CSS样式*/
    .centerbox{
        width: calc(100% - 450px);
    }     
  }
@media  (min-width: 1200px) and (max-width: 1450px){
  .trademain .cen-right .cont-right .centerbox{
     width: calc(100% - 650px);
  }
  
}
</style>
